<template>
  <!-- tablecommon -->
  <div class="commonBoxmp white-bg">
    <el-descriptions class="margin-top" title="带边框列表" :column="3" border>
      <template #extra>
        <el-button type="primary" size="small">操作</el-button>
      </template>
      <el-descriptions-item>
        <template #label>
          <i class="el-icon-location-outline"></i>
          地址名
        </template>
        {{ state.address.address }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <i class="el-icon-location-outline"></i>
          经度
        </template>
        {{ state.address.location.longitude }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <i class="el-icon-location-outline"></i>
          纬度
        </template>
        {{ state.address.location.latitude }}
      </el-descriptions-item>
    </el-descriptions>
    <AutoNaviMap @drag="dragMap" style="height: 600px" class="mt20" />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import AutoNaviMap from "/@/components/map/AutoNaviMap.vue";
const router = useRouter();
const route = useRoute();
onMounted(() => {});
/*
基本数据类型
引用数据类型（复杂类型） 个人建议 ref初始化变量 
ref 和 reactive 本质我们可以简单的理解为ref是对reactive的二次包装, 
ref定义的数据访问的时候要多一个.value
*/
const count = ref(0);
const state = reactive({
  address: {
    address: "",
    location: {
      latitude: "", //维度
      longitude: "", //经度
    },
  },
});
const dragMap = (e: any) => {
  state.address = e;
};
</script>

<style scoped lang="scss"></style>
